<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
	<head>
		<title>职业兴趣测试</title>
		<meta name="decorator" content="cms_default_${site.theme}"/>
		<meta name="description" content="JeeSite ${site.description}"/>
		<meta name="keywords" content="JeeSite ${site.keywords}"/>
		<link rel="stylesheet" href="${ctxStatic}/css/main.css"/>
		<link rel="stylesheet" href="${ctxStatic}/css/style.css"/>
		<script type="text/javascript">
			function course(obj,id,answer){
				$("#"+id).val(id+"-"+answer);
				$(obj).parent().parent().find("a").css("background","url(${ctxStatic}/img/myup.png) no-repeat left center");
				$(obj).css("background","url(${ctxStatic}/img/myon.png) no-repeat left center");
			}
			function page(n,s,end){
				$("#pageNo").val(n);
				$("#pageSize").val(s);
				if(end == "end"){
					$("#searchForm").append($("<input type='hidden' name='end' value='"+end+"'/>"));
				}
				var recordInput = addSeparator('answerRecord','record');
				if(!recordInput){
					return false;
				}
				$("#searchForm").append(recordInput);
				$("#searchForm").submit();
	        	return false;
	        }
		    //将names的值加上|分隔符  返回一个input对象
		    function addSeparator(name,newName){
		    	var val = "";
		    	var names = document.getElementsByName(name);
	            for(var i=0; i<names.length; i++){
	                if(names[i].value==''){
	                	layer.msg(names[i].id.split("-")[0]+"题还未作答！");
	                    return false;
	                }
	                val += names[i].value+"|";
	            }
	            val = val.substring(0,val.length-1);
	            return $("<input type='hidden' name='"+newName+"' value='"+val+"'/>");
		    }
		</script>
	</head>
<body>
	<form:form id="searchForm" modelAttribute="inTheme" action="${ctx}/front/inThemeTest" method="post" class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
		<input id="part" name="part" type="hidden" value="${inTheme.part}"/>
	</form:form>
	
			<div class="shop-center">
				<div class="course-tit">
					<h1>职业兴趣测试</h1>
				</div>

				<div class="course">
					<div class="course-lt">
						<ul class="course-li">
							<c:if test="${page.pageNo == 1}">
								<c:if test="${inTheme.part == 1}">
									<li>
										第一部分：兴趣倾向
									</li>
									<li>
										下面列出了一些具体的活动或者职业，请你根据自己的喜好作答，你若喜欢从事题目中所列的活动，请选"是"，否则请选"否"答案无对错之分。
										 注意：本问卷主要用来确定你的职业兴趣，而非让你选择工作，你喜欢某种活动并不意味着你一定要从事这种活动，答题时也不必考虑自己是否干过或擅长这种活动，只根据你的兴趣直接判断即可。
									</li>
								</c:if>
								<c:if test="${inTheme.part == 2}">
									<li>
										第二部分：个体经历
									</li>
									<li>
										下面列出一些具体活动，对于你能够做得很好或者胜任的活动，请选"是"；对于你从未做过或做的不好的活动，请选"否"。
										 注意：选择时只考虑你是否擅长此活动，而不要考虑自己是否喜欢该活动或是否适合做该项活动。
									</li>
								</c:if>
								<c:if test="${inTheme.part == 3}">
									<li>
										第三部分：人格倾向
									</li>
									<li>
										下面是一些具体的描述，请仔细阅读题目，并根据自己的实际情况填答“是”或“否”。答题时以自己的第一反应为依据，不要过分推敲。
									</li>
								</c:if>
							</c:if>
							<c:forEach items="${page.list}" var="inTheme">
								<li>
									<c:set var="themeRecord" value="${fns:getByUserIdAndThemeId(inTheme.id,'1')}" scope="request"/> 
									<h1>${inTheme.sequence}.${inTheme.title}</h1>
									<input type="hidden" id="${inTheme.sequence}-${inTheme.id}-${inTheme.answer}" name="answerRecord" <c:if test="${not empty themeRecord}">value="${inTheme.sequence}-${inTheme.id}-${inTheme.answer}-${themeRecord.score}"</c:if>/>
									<c:if test="${inTheme.answer == 1}">
										<p><a href="javascript:;"  
												<c:if test="${themeRecord != null && themeRecord.score == inTheme.category}">style="background:url(${ctxStatic}/img/myon.png) no-repeat left center"</c:if>
											onclick="course(this,'${inTheme.sequence}-${inTheme.id}-${inTheme.answer}','${inTheme.category}')">是</a></p>
										<p><a href="javascript:;" 
											<c:if test="${themeRecord != null && themeRecord.score != inTheme.category}">style="background:url(${ctxStatic}/img/myon.png) no-repeat left center"</c:if>
											onclick="course(this,'${inTheme.sequence}-${inTheme.id}-${inTheme.answer}','0')">否</a></p>
									</c:if>
									<c:if test="${inTheme.answer == 0}">
										<p><a href="javascript:;" 
											<c:if test="${themeRecord != null && themeRecord.score != inTheme.category}">style="background:url(${ctxStatic}/img/myon.png) no-repeat left center"</c:if>
											onclick="course(this,'${inTheme.sequence}-${inTheme.id}-${inTheme.answer}','0')">是</a></p>
										<p><a href="javascript:;" 
											<c:if test="${themeRecord != null && themeRecord.score == inTheme.category}">style="background:url(${ctxStatic}/img/myon.png) no-repeat left center"</c:if>
											onclick="course(this,'${inTheme.sequence}-${inTheme.id}-${inTheme.answer}','${inTheme.category}')">否</a></p>
									</c:if>
								</li>
							</c:forEach>						
						</ul>
					</div>
					<div class="course-rt">
						<h1>热点推荐</h1>
						<div class="course-img">
							<img src="${ctxStatic}/img/img1.png"/>
							<p>放声大哭刘凡家</p>
						</div>
					</div>
				</div>				
			</div>
			<div class="peper">
				${upAndDown}
			</div>
</body>

